<template>
    <div>


        <a-spin :spinning="loading" size="large" class="loading-spinner" />

        <div class="show-pc">
            <div class="my-works" style="background-color: var( --color-bg-F6);" v-show="!loading">
                <div class="my-title">
                    <div class="title_left">
                        <div class="name-img-box">
                            <img :src="userImg" alt="头像" class="name-img">
                        </div>
                        <div class="info-container">
                            <div class="information">
                                <h1 class="username">李当时就肯定会</h1>
                                <div class="text">重庆项目</div>
                                <div class="text">设计师</div>
                                <div class="text">项目部</div>
                            </div>
                            <div class="account">
                                账号：0238564323002
                                <img src="../../assets/images/new_img/复制2.png" alt="" @click="copyAccount"
                                    class="account-item" v-show="!isCopied">
                                <img src="../../assets/images/new_img/已复制.png" alt="" class="account-item"
                                    v-show="isCopied">
                            </div>
                        </div>
                    </div>
                    <div class="title_right">
                        <div class="stats-item">
                            <div class="number">7878</div>
                            <div class="text">获赞</div>
                        </div>
                        <div class="stats-item">
                            <div class="number">7878</div>
                            <div class="text">收藏</div>
                        </div>
                    </div>
                </div>


                <!-- 选择 -->
                <div class="selector-wrapper">
                    <div class="selector-container">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            <img :src="getIconPath(item)" :alt="item.label" class="menu-img">
                            {{ item.label }}
                        </div>
                    </div>
                </div>

                <div style="width:  95.83333333333334vw; margin: 0 auto;">
                    <component :is="currentComponent" :userData="currentUserData" :config="componentConfig" />
                </div>
            </div>
        </div>
        <!-- 手机 -->
        <div class="show-wap">
            <div class="my-works-wap" style="background-color: var( --color-bg-F6);" v-show="!loading">
                <div class="my-title-wap">
                    <div class="title_left-wap">
                        <div>
                            <img :src="userImg" alt="头像" class="name-img-wap">
                        </div>
                        <div class="info-container-wap">
                            <div class="information-wap">
                                <h1 class="username-wap">李当时就肯定会</h1>

                                <div style="display: flex; gap: 6px;">
                                    <span class="text-wap">重庆项目</span>
                                    <span class="text-wap">设计师</span>
                                    <span class="text-wap">项目部</span>
                                </div>

                            </div>
                            <div class="account-wap">
                                账号：{{ userInfo.account }}
                                <img src="../../assets/images/new_img/复制2.png" alt="" @click="copyAccount"
                                    class="account-item" v-show="!isCopied">
                                <img src="../../assets/images/new_img/已复制.png" alt="" class="account-item"
                                    v-show="isCopied">
                            </div>
                            <!-- <div class="title_right-wap">

                                <div>
                                    <div class="like-wap">
                                        <span>获赞:</span>
                                        <span style="color:  #d1000d;">7878</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="like-wap"> <span>收藏:</span>
                                        <span style="color:  #d1000d;">7878</span>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>

                </div>
                <!-- 选择 -->
                <div class="selector-wrapper-wap">
                    <div class="selector-container-wap">
                        <div v-for="item in menuItems" :key="item.key" class="menu-item-wap"
                            :class="{ 'active': activeKey === item.key }" @click="handleSelect(item.key)">
                            <img :src="getIconPath(item)" :alt="item.label" class="menu-icon-wap">
                            {{ item.label }}
                        </div>
                    </div>
                </div>

                <div style="width:  95.83333333333334vw; margin: 0 auto;">
                    <component :is="currentComponent" :userData="currentUserData" :config="componentConfig" />
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import Mywork from '@/components/Mywork/Mywork.vue'
import notification from '@/components/notification/notification.vue'
import Myattention from '@/components/Myattention/Myattention.vue'
import Mypraise from '@/components/Mypraise/Mypraise.vue'
import MyCollect from '@/components/MyCollect/MyCollect.vue'
import DownloadRecord from '@/components/DownloadRecord/DownloadRecord.vue'
import MyBrowsingHistory from "@/components/MyBrowsingHistory/MyBrowsingHistory.vue"
import userImg from "../../assets/images/local_img/userInfo.jpg"

const route = useRoute()

// 1. 动态加载图标（普通和选中状态）
const iconModules = import.meta.glob('@/assets/images/new_img/*.png', { eager: true })
const getIcon = (name) => {
    const basePath = Object.keys(iconModules).find(path => path.includes(name))
    return basePath ? iconModules[basePath].default : ''
}

// 2. 图标配置
const menuItems = ref([
    { key: 'works', label: '我的作品', type: '笔' },
    { key: 'notifications', label: '消息通知', type: '消息' },
    { key: 'following', label: '我的关注', type: '关注' },
    { key: 'likes', label: '我的点赞', type: '心点赞' },
    { key: 'collections', label: '我的收藏', type: '收藏' },
    { key: 'downloads', label: '下载记录', type: '下载2' },
    { key: 'BrowsingHistory', label: '浏览记录', type: '眼睛' }
])

// 3. 组件映射
const componentMap = {
    works: Mywork,
    notifications: notification,
    following: Myattention,
    likes: Mypraise,
    collections: MyCollect,
    downloads: DownloadRecord,
    BrowsingHistory: MyBrowsingHistory
}

const activeKey = ref('')
const currentComponent = computed(() => componentMap[activeKey.value])

// 4. 获取图标路径（根据是否选中）
const getIconPath = (item) => {
    const iconName = activeKey.value === item.key
        ? `选中${item.type}`  // 选中状态
        : item.type           // 普通状态

    return getIcon(iconName)
}

const handleSelect = (key) => {
    activeKey.value = key
}


watch(
    () => route.params.id,
    (newId) => {
        if (newId) {
            console.log(newId);

            activeKey.value = newId
        }
    },
    { immediate: true }
)
const currentUserData = ref({
    id: 123,
    name: '李当时就肯定会',
    projects: ['重庆项目', '北京项目']
})

const componentConfig = ref({
    showActions: true,
    editable: false
})


// 用户信息数据
const userInfo = ref({
    name: '幸运的李李',
    department: '重庆项目 设计部 设计师',
    account: '0238564323002'
});


// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = () => {
    console.log(111);
    const account = userInfo.value.account;
    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);


    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};

// 加载状态控制
const loading = ref(true)

// 模拟数据加载
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1500) // 1.5秒后关闭加载状态
})


</script>


<style lang="less" scoped>
.my-works {


    width: 100%;

    margin: 0 auto;

    min-height: 100vh;


    .my-title {
        width: 95.83333333333334vw;
        margin: 0 auto;
        margin-top: 0.52vw;
        min-height: 10.4vw;
        display: flex;
        flex-wrap: wrap;

        justify-content: space-between;
        align-items: center;
        padding: 1.04vw;
        gap: 1.04vw;

        .title_left {
            display: flex;
            flex-wrap: wrap;
            gap: 1.04vw;
            align-items: center;
            flex: 1;
            min-width: 13vw;

            .name-img-box {
                width: 5vw;
                height: 5vw;


                .name-img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    object-fit: cover;

                }
            }



            .info-container {
                display: flex;
                flex-direction: column;
                gap: 0.41vw;

            }

            .information {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 0.52vw;



                .username {

                    font-size: var(--text-22);
                    color: var(--color-text-3);
                    margin: 0;
                    line-height: 1.2;
                }

                .text {

                    font-size: var(--text-16);
                    color: var(--color-text-3);
                }


            }

            .account {
                margin-top: 0.52vw;
                font-size: var(--text-14);
                color: var(--color-text);
                display: flex;
                align-items: center;
                gap: 0.26vw;
     

                .account-item {
                    width: 0.625vw;
                    height: 0.625vw;
                }
            }
        }

        .title_right {
            display: flex;
                     
            gap: 1vw;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            color: var(--color-text);

            .stats-item {
                text-align: center;
                min-width: 4.16vw;

                .number {
                    font-size:var(--text-30);
                    color: #d1000d;
                    line-height: 1;
                    margin-bottom: 0.31vw;
                    
                }
                .text{
                     font-size:var(--text-14);
                     
                }


            }
        }
    }

    .selector-wrapper {
        width: 100%;
        height: 3.64vw;
        background-color: var(--color-bg-20);
        display: flex;

        align-content: center;

        /* 选择器主体 */
        .selector-container {
            width: 95.83333333333334vw;
            margin: 0 auto;
            display: flex;
            border-radius: 0.41vw;

            overflow-x: auto;
            /* 最大宽度限制 */
            scrollbar-width: none;
            /* 隐藏滚动条（Firefox） */
        }


    }





    .menu-item {
        padding: 12px clamp(12px, 2vw, 24px);
        /* 响应式内边距 */
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        transition: all 0.3s ease;
        flex-shrink: 0;
        font-size: var(--text-16);
        color: var(--color-text);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;

        .menu-img {
            width: 0.8vw;
            height: 0.8vw;
        }

    }




    .selector-container::-webkit-scrollbar {
        display: none;
        /* 隐藏滚动条（Chrome/Safari） */
    }


    .menu-item.active {
        color: #d7000e;
        font-weight: 500;
    }

    .menu-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background-color: currentColor;
    }


}

/* 响应式调整 */
@media (max-width: 768px) {
    .my-works {
        max-width: 90vw;
        padding: 10px;

        .my-title {
            flex-direction: column;
            align-items: flex-start;
            gap: 30px;

            .title_left {
                width: 100%;
            }

            .title_right {
                width: 100%;
                justify-content: flex-start;
            }
        }
    }

    .selector-container {
        max-width: 90vw;
        /* 小屏幕放宽限制 */
    }

    .menu-item {
        padding: 10px clamp(8px, 3vw, 16px);
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .my-works {
        max-width: 100vw;
        padding: 10px 5px;

        .my-title {
            padding: 10px;

            .title_left {
                gap: 15px;

                .information {
                    gap: 5px;
                }
            }
        }
    }

    .selector-wrapper {
        padding: 0;
        justify-content: flex-start;
    }

    .selector-container {
        max-width: 100vw;
        border-radius: 0;
    }
}


.my-works-wap {
    width: 100%;

    margin: 0 auto;
    margin-bottom: 80px;
    min-height: 100vh;
    // height: auto;
    // max-height: 100vh;
    // overflow-y: auto;
    // border: 1px solid red;


    .text-wap {
        font-size: 16px;
    }

    .my-title-wap {

        margin: 0 auto;

        display: flex;
        flex-wrap: wrap;
        /* 允许换行 */
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        gap: 20px;

        .title_left-wap {
            display: flex;
            gap: 14px;
            align-items: center;
            flex: 1;
            min-width: 250px;

            .name-img-wap {
                width: clamp(80px, 10vw, 100px);
                /* 响应式头像大小 */
                height: clamp(80px, 10vw, 100px);
                border-radius: 50%;
                object-fit: cover;
            }

            .info-container-wap {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .information-wap {
                display: grid;

                gap: 2px;
                color: var(--color-text-3);

                .username-wap {
                    font-size: 18px;

                }


            }

            .account-wap {
                font-size: clamp(12px, 1.5vw, 14px);
                color: var(--color-text);
                display: flex;
                align-items: center;
                gap: 5px;


                .account-item {
                    width: 15px;
                    height: 15px;
                }

            }

            .title_right-wap {

                display: flex;
                gap: 14px;
                color: var(--color-text);

                .like-wap {
                    font-size: 14px;
                }
            }
        }


    }


    .selector-wrapper-wap {
        width: 100%;
        height: 50px;
        background-color: var(--color-bg-20);
        display: flex;
        align-content: center;

        /* 选择器主体 */
        .selector-container-wap {
            width: 95.83333333333334vw;
            margin: 0 auto;
            display: flex;
            border-radius: 8px;
            overflow-x: auto;
            scrollbar-width: none;

        }

        .menu-item-wap {
            padding: 12px clamp(12px, 2vw, 24px);
            cursor: pointer;
            white-space: nowrap;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: 16px;
            color: var(--color-text);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;

            .menu-icon-wap {
                width: 18px;
                height: 18px;
            }



        }

        .menu-item-wap.active {
            color: #d7000e;
            font-weight: 500;
        }

        .menu-item-wap.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background-color: currentColor;
        }

    }
}
</style>